<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    number2:{{number2}}
    <hr/>
    <com-b @abc="fun_a"></com-b>
    <hr/>
    <com-c @bcd="fun_b"></com-c>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>

    // 没有传值 只是触发了一个事件
    Vue.component('com-b', {
        data() {
            return {
                number1: 1
            }
        },
        methods: {
            fun_a() {
                // 1.触发了一个自定义的事件
                this.$emit('abc')
                // 2.不是必须的
                this.number1++
            }
        },
        template: `
          <div>
            <h3>我是组件com-b</h3>
            <b>number1:{{ number1 }}</b><br/>
            <button @click="fun_a">点击我</button>
          </div>
        `
    })
    // 传值
    Vue.component('com-c', {
        data() {
            return {
                number1: Math.floor(Math.random() * 100 + 1)
            }
        },
        methods: {
            fun_a() {
                // 触发了一个自定义的事件,第一个参数是：事件名，后边的参数是：传递的参数
                this.$emit('bcd', this.number1, 'abc')
            }
        },
        template: `
          <div>
            <h3>我是组件com-c</h3>
            <button @click="fun_a">点击我</button>
          </div>
        `
    })

    new Vue({
        el: '#app',
        data() {
            return {
                number2: 1
            }
        },
        methods: {
            fun_a() {
                this.number2++
            },
            fun_b(num, name) {
                console.log(num)
                console.log(name)
            }
        }
    })
</script>